<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_666745_rb6ijwlp2tq33di.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--主体-->
		<div class="contain">

			<!--音频-->
			<audio autoplay="autoplay" loop="loop" controls="controls">
				<source src="audio/H5纯音乐 - 婚礼进行曲.mp3"/>
			</audio>
			<!--阿里巴巴图标 音乐-->
			<i class="iconfont icon-yinle"></i>
			<div class="logo"><img src="img/logo.png" /></div>

			<div class="text">
				<img src="img/texat_01.png" />
				<img src="img/texat_02.png" />
				<img src="img/texat_03.png" />
				<img src="img/texat_04.png" />
				<img src="img/texat_05.png" />
				<img src="img/texat_06.png" />
				<img src="img/texat_07.png" />
				<img src="img/texat_08.png" />
			</div>
			<img class="hongjiu" src="img/hongjiu.png" />

			<div class="anniu">
				<img src="img/anNiu.png" />
				<p>定制我的囍宴</p>
			</div>
			<div class="dong"></div>
			<div class="dongh"></div>
			<div class="anniu2">
				<a href="place.html">
					<img src="img/anNiu.png" />
					<p>我要免费领囍酒</p>
				</a>
			</div>
			

			<div class="tanchu">
				<div class="guize">
					<div class="close">x</div>
					<p>定制专属囍宴</p>
					<p>邀请宾客入席</p>
					<span>抢999元现金贺礼</span>
					<a href="guize.html">
						<p class="chakan">查看活动规则</p>
					</a>
				</div>
			</div>

		</div>
		
		<script type="text/javascript">
			var music = document.querySelector("audio"); //获取音频
			var icon = document.querySelector("i"); //获取图标
			var isplay = true;
			var katong = document.querySelector(".dong");
			var katon = document.querySelector(".dongh");
			var tanchu = document.querySelector(".tanchu");
			var guize = tanchu.querySelector(".guize");
			var close = guize.querySelector(".close");
			var anniu = document.querySelector(".anniu");

			close.addEventListener("click", function() {
				tanchu.style.display = "none";
			})

			anniu.addEventListener("click", function() {
				tanchu.style.display = "block";
			})

			//图标的监听事件
			icon.addEventListener("click", function() {
				if(isplay == true) {
					icon.style.animationPlayState = "paused";
					music.pause();
					isplay = false;
				} else {
					isplay = true;
					music.play();
					icon.style.animationPlayState = "running";
				}
			})
			//计时器
			setInterval(function() {
				if(katong.classList.contains("donghua") && katon.classList.contains("donghua2")) {
					katong.classList.remove("donghua");
					katon.classList.remove("donghua2")
				} else {
					katong.classList.add("donghua");
					katon.classList.add("donghua2");
				}
			}, 2000)
		</script>

	</body>

</html>